<template>
  <t-card :bordered="false" class="page-account-manage">
    <common-header-title>
      <template #actions>
        <t-button>新增用户</t-button>
      </template>
    </common-header-title>
    <common-search-box :generate-form="generateForm" @on-submit="getSearchData" />
    <common-table
      :data="data"
      :columns="columns"
      :hover="true"
      :pagination="pagination"
      :loading="tableLoading"
      @page-change="onPageChange"
    >
      <template #status="{ row }">
        <t-tag :theme="USERSTATUS_TYPES.get(row.status)" variant="light">{{ USERSTATUS.get(row.status) }}</t-tag>
      </template>
      <template #op="{ row }">
        <a class="t-button-link" @click="editAccount(row)">编辑 </a>
        <t-popconfirm
          theme="default"
          :content="row.status === 1 ? '确定停用吗？' : '确定启用吗？'"
          @confirm="changeStatus(row)"
        >
          <a class="t-button-link">{{ row.status === 1 ? '停用' : '启用' }} </a>
        </t-popconfirm>
      </template>
    </common-table>
  </t-card>
</template>
<script setup lang="ts">
import { FormProps, TableProps } from 'tdesign-vue-next';

import { FormItem } from '@/components/search-box/types';
import { USERSTATUS, USERSTATUS_TYPES, USERSTATUSONOPTION } from '@/constants';

defineOptions({
  name: 'PageAccountManage',
});
const generateForm = ref<FormItem[]>([
  {
    name: 'roleId',
    type: 'select',
    minCollapsedNum: 1,
    placeholder: '请选择角色',
    value: '',
    keys: { value: 'roleId', label: 'roleName' },
    options: [],
  },
  {
    name: 'status',
    type: 'select',
    placeholder: '请选择状态',
    value: '',
    options: USERSTATUSONOPTION,
  },
]);
const data = reactive<TableProps['data']>([]);
const columns: TableProps['columns'] = [
  {
    title: '账号',
    colKey: 'account',
    width: 200,
  },
  {
    title: '姓名',
    colKey: 'userName',
    width: 200,
  },
  { title: '手机号', colKey: 'tel', width: 200 },
  {
    title: '邮箱',
    colKey: 'email',
    width: 200,
  },
  {
    title: '状态',
    colKey: 'status',
    width: 200,
  },
  {
    title: '角色',
    colKey: 'roleIdListStr',
    width: 200,
  },
  {
    fixed: 'right',
    colKey: 'op',
    width: 150,
    title: '操作',
  },
];
const tableLoading = ref(false);
const searchData = ref({});
const pagination = reactive({ pageSize: 10, current: 1, total: 0, showJumper: true });

const getSearchData = (data: FormProps['data']) => {
  searchData.value = data;
  console.log(searchData.value);
  pagination.current = 1;
};
const editAccount = (row: TableProps['data'][number]) => {
  console.log(row);
};
const changeStatus = (row: TableProps['data'][number]) => {
  console.log(row);
};
const onPageChange: TableProps['onPageChange'] = async (pageInfo) => {
  pagination.pageSize = pageInfo.pageSize;
  if (data.length > 0) {
    pagination.current = pageInfo.current;
    // this.getUserList();
  }
};
</script>

<style lang="less" scoped></style>
